<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="author" content="Warrior">
    <title>轮播图</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link rel="stylesheet" href="./css/base.css">
    <style>
        #ms_left_slideBox {
            width: 980px;
            height: 225px;
            position: relative;
        }

        .ms_left_imgBox {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            overflow: hidden;
        }

        #ms_left_slideBox .ms_left_imgBox>.ms_left_box {
            width: 100%;
            height: 100%;
            position: absolute;
            left: 0;
            top: 0;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
        }

        #ms_left_slideBox .ms_left_imgBox>div>div{
            width: 19%;
            height: 100%;
            background-color: pink;
            border-right: 1px solid #ddd;
        }
        #ms_left_slideBox .ms_left_imgBox>div>div:last-child{
            border-right:none;
        }

        .ms_left_show {
            display: inline-block;
        }

        .ms_left_buttons{
            position: relative;
        }

        #ms_left_prev {
            position: absolute;
            left: 0px;
            top: 100px;
        }
        #ms_left_next {
            position: absolute;
            left: 955px;
            top: 100px;
        }

        .ms_left_span {
            display: inline-block;
            width: 25px;
            height: 25px;
            background-color: black;
            opacity: 0.6;
            text-align: center;
            line-height: 23px;
            color: white;
        }

    </style>
</head>

<body>
    <div id="ms_left_slideBox">
        <div class="ms_left_imgBox">
            <div class="ms_left_box">
                <div>1</div>
                <div>2</div>
                <div>3</div>
                <div>4</div>
                <div>5</div>
            </div>
            <div class="ms_left_box">
                <div>6</div>
                <div>7</div>
                <div>8</div>
                <div>9</div>
                <div>10</div>
            </div>
            <div class="ms_left_box">
                <div>11</div>
                <div>12</div>
                <div>13</div>
                <div>14</div>
                <div>15</div>
            </div>
            <div class="ms_left_box">
                <div>16</div>
                <div>17</div>
                <div>18</div>
                <div>19</div>
                <div>20</div>
            </div>           
        </div>
        <div class="ms_left_buttons">
            <span id="ms_left_prev" class="ms_left_span">&lt;</span>
            <span id="ms_left_next" class="ms_left_span">&gt;</span>
        </div>
    </div>
    <script>
        $('.ms_left_box').each(function(index,item){
            $(this).css({
                left:index*980
            })
        })

        var ms_left_index = 0;
        var ms_left_lastIndex = 0;

        function ms_left_getPrevIndex(){
            return ms_left_index <= 0 ? $('.ms_left_box').length - 1 : ms_left_index - 1;
        }
        
        function ms_left_getNextIndex(){
            return ms_left_index >= $('.ms_left_box').length - 1 ? 0 : ms_left_index + 1;
        }

        function ms_left_showNextImage(){
            ms_left_index = ms_left_getNextIndex();

            $('.ms_left_box').eq(ms_left_index).finish().css({
                left:980
            }).animate({
                left:0
            },500)

            $('.ms_left_box').eq(ms_left_lastIndex).finish().animate({
                left:-980
            },500)
            ms_left_lastIndex = ms_left_index;
        }

        function ms_left_showPrevImage(){
            ms_left_index = ms_left_getPrevIndex();
            $('.ms_left_box').eq(ms_left_index).finish().css({
                left:-980
            }).animate({
                left:0
            },500);

            $('.ms_left_box').eq(ms_left_lastIndex).finish().animate({
                left:980
            },500)
            ms_left_lastIndex = ms_left_index;
        }

        $('#ms_left_next').click(function(){
            ms_left_showNextImage();
        })

        $('#ms_left_prev').click(function(){
            ms_left_showPrevImage();
        })

    </script>
</body>

</html>